<template>
  <div id="comment-item">
    <div class="content">
      <img
        src="https://img0.baidu.com/it/u=567609319,2823675842&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
        alt=""
        class="avatar"
      />
      <div class="nickname-comment">
        <div class="nickname">
          <div>mooc67018426539959207</div>
          <el-rate :value="3.4" disabled show-score text-color="#ff9900">
          </el-rate>
        </div>
        <div class="comment">
          李老师的课讲的非常的棒，用词简单凝练，讲授的知识，由浅入深，由表及里，循循善诱，抽丝剥茧般的让我们理解那些晦涩难懂的术语，知识点。李老师讲课给我带来了很大的帮助，我刚报名这门课程的时候，只有七十人参加了，现在已经有两千多人参加到这门课的学习了，这也从侧面反映出我们李老师的受欢迎程度。希望大家好好学习，多多交流。当然了，也希望同学们多多发言。和我交流也行
        </div>
      </div>
    </div>
    <div class="time">
      <div class="time-info">
        <div class="t">发表于 2019-02-28</div>
        <div class="class-num">第5次开课</div>
        <div class="reply" style="margin-left: 10px; cursor: pointer">回复</div>
        <div
          class="reply-num"
          style="margin-left: 10px; color: #409eff; cursor: pointer"
        >
          查看3条回复
        </div>
      </div>
      <div style="display:flex;display: -webkit-flex;">
        <div class="thumb" style="margin-right:10px;">
          <i class="bi bi-hand-thumbs-down"></i>
          <span>123</span>
        </div>

        <div class="thumb">
          <i class="bi bi-hand-thumbs-up-fill"></i>
          <span>123</span>
        </div>
      </div>
    </div>

    <!-- 回复内容开始 -->
    <div class="reply-comment">
      <reply-comment style="margin-top: 20px" />
      <reply-comment style="margin-top: 20px" />
      <reply-comment style="margin-top: 20px" />
    </div>
    <!-- 回复内容结束 -->

    <el-divider></el-divider>
  </div>
</template>

<script>
import ReplyComment from "./ReplyComment.vue";
export default {
  components: { ReplyComment },
};
</script>

<style scoped>
#comment-item .content {
  display: flex;
  display: -webkit-flex;
  justify-content: start;
}

#comment-item .content .nickname-comment .nickname {
  display: flex;
  display: -webkit-flex;
  justify-content: start;
  align-content: center;
}

#comment-item .content .nickname-comment .comment {
  font-size: 14px;
  line-height: 20px;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  margin-top: 10px;
}

#comment-item .time {
  font-size: 13px;
  color: gray;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;

  margin-top: 13px;
  margin-left: 70px;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
}

#comment-item .reply-comment {
  margin-left: 70px;
}

#comment-item .time .time-info .t {
  margin-right: 10px;
}

#comment-item .time .time-info .reply:hover {
  color: #409eff;
}

#comment-item .time .thumb {
  cursor: pointer;
}
#comment-item .content img {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  margin-right: 20px;
}

#comment-item .time .time-info {
  display: flex;
  display: -webkit-flex;
  justify-content: start;
}
</style>